<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/7
  Time: 19:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <style>
        body{
            background-color: rgb(242,242,242);
            padding: 15px;
        }
        .div-content{

            background-color: white;
            border-radius: 10px;
            padding: 15px;
        }
        fieldset{
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
            border-radius: 10px;
        }
        #mydiv{
            padding-top: 10px;
        }
        #mydiv>div{
            padding: 1px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<%--新增弹出框--%>
<div id="mydiv"  style="display: none">
    <form  class="layui-form" lay-filter="dataform" id="dataform" method="post">
        <div class="layui-form-item" >
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline">
                <input type="text" style="width: 650px" name="clientName" required autocomplete="off" lay-verify="required|clientName" placeholder="请输入用户名（汉字）" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">手机号码：</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required style="width: 650px"
                       autocomplete="off" lay-verify="required|phone" placeholder="请输入手机号码（11位数字）" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">身份证号：</label>
            <div class="layui-input-inline">
                <input type="text" name="idCard" required style="width: 650px" lay-verify="required|idCard"
                       autocomplete="off" placeholder="请输入身份证" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">房间类型：</label>
            <div class="layui-input-inline">
                <select name="typeName" required style="width: 500px;height: 80px" class="layui-select" lay-filter="sel" id="sel">
                    <option value="" selected>请选择</option>
                    <option value="单人间">单人间</option>
                    <option value="双人间">双人间 </option>
                    <option value="海景房">海景房</option>
                    <option value="总统套房">总统套房</option>
                    <option value="情侣房">情侣房</option>
                    <option value="麻将房">麻将房</option>
                    <option value="豪华套间">豪华套间</option>
                    <option value="电竞房">电竞房</option>
                    <option value="大床房">大床房</option>
                    <option value="商务间">商务间</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间号码：</label>
            <div class="layui-input-inline">
                <select name="roomNum" id="roomNum" lay-verify="required" lay-filter="xmFilter">
                    <option value="" ></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">入住时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime" id="startTime" required style="width: 650px"
                       lay-verify="startTime" placeholder="yyyy-MM-dd"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">退房时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="deadTime" id="deadTime" required style="width: 650px"
                       lay-verify="required|confirmData" placeholder="yyyy-MM-dd"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit=""
                        lay-filter="dosubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<div class="div-content">
<%--页面搜索框--%>
    <fieldset>
        <legend>搜索信息</legend>
        <form id="form-login" lay-filter="form-login-filter" class="layui-form layui-form-item layui-form-pane" method="get" action="">
            <div class="layui-inline">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="client.clientName" id="clientName" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button id="selByName" type="button" lay-submit lay-filter="form-login-filter" class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search">搜索</button>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search" lay-event="addOrder" id="addOrder">新增</button>
            </div>
            <br/>
            <hr/>
            <div class="layui-form-item">
                <label class="layui-form-label">订单状态：</label>
                <div class="layui-input-block" style="margin-left: 10px">
                        <input type="radio" lay-filter="orderState" name="orderState" value="已支付" title="已支付">
                        <input type="radio" lay-filter="orderState" name="orderState" value="未支付" title="未支付">
                        <input type="radio" lay-filter="orderState" name="orderState" value="已取消" title="已取消">
                        <input type="radio" lay-filter="orderState" name="orderState" value="" title="无">
<%--                        <input type="submit" class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search" value="查询">--%>
                </div>
            </div>
        </form>
    </fieldset>

    <table id="table-order" lay-filter="table-order-filter"></table>
</div>


<%--操作按钮--%>
<script type="text/html" id="cols-order-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="findById" id="findById">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="find" id="find">查看详情</button>
    </div>
</script>

<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script>

    function reload(){
       window.location.reload()
    }
    //数据渲染
    layui.use([ "element", "jquery", "layer", "form", "table",'laydate' ], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var form = layui.form;
        var url;
        var tanIndex;
        var index;
        //员工列表渲染
        var myTable= table.render({
            elem: '#table-order'
            ,toolbar: '#table-order-toolbar'
            ,height: 312
            ,url: 'showDetail' //数据接口
            ,page: true //开启分页
            ,limits:[2,4,6]
            ,limit:4
            ,cols: [[ //表头
                {field: 'orderId', title: '订单id', width:69,}
                ,{field: 'orderNum', title: '订单编码', width:250}
                ,{field: 'orderDate', title: '订单日期', width:180}
                ,{field: 'orderState', title: '订单状态', width:160}
                ,{field:'d.client.clientName', title: '用户名',templet:function (d){
                        return d.client.clientName;
                    }
                }
                ,{title: '操作',toolbar:'#cols-order-toolbar'}
            ]]
        });
        //监听表单提交
        form.on('submit(form-login-filter)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //模糊查询
        $("#selByName").click(function () {
            myTable.reload({
                page: {curr: 1 , limit: 4},
                url:'showDetail',
                    where: { //设定异步数据接口的额外参数，任意设
                        clientName: $("#clientName").val(),
                        orderState: $('input:radio:checked').val()
                }
            });

        });

        //下拉列表改变事件
        form.on('select(sel)', function (data) {
            var typeName=$('#sel').val();
            $.ajax({
                type:'get',
                url:'addOrders',
                data:'typeName='+typeName,
                success:function (d) {
                    $('#roomNum').empty();
                    $.each(d.data, function (index, value) {
                        $('#roomNum').append(new Option(value.roomNum,value.roomNum));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }
            })
        });

        //单选框查询
        form.on('radio(orderState)', function(data){
            myTable.reload({
                page: {curr: 1 , limit: 4},
                url:'showDetail',
                where: { //设定异步数据接口的额外参数，任意设
                    orderState: data.value,
                    clientName: $("#clientName").val()
                }
            });
        });

        //正则表达式验证
        form.verify({
            phone: function (value) {
                if (value.length != 11) {
                    return '新手机号必须为11位合法数字';
                }
                var reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
                if (reg.test(value)) {
                    // return '手机号码格式正确';
                } else {
                    return '非法手机号';
                }
            }
            , idCard: function (value) {
                if (value.length != 18) {
                    return '身份证号必须为18位合法数字';
                }
                var reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                if (reg.test(value)) {
                    // return '身份证号格式正确';
                } else {
                    return '非法身份证号';
                }
            }
            ,clientName:function (value) {
                if (value.length <2) {
                    return '用户名必须大于等于二位数';
                }
                var reg = /^[\u4E00-\u9FA5A-Za-z]+$/;
                if (reg.test(value)) {
                    // return '用户名格式正确';
                } else {
                    return '非法用户名';
                }
            }
            ,confirmData:function(value){
                var startDate = new Date($('#startTime').val()).getTime();
                var endTime = new Date(value).getTime();
                if(endTime < startDate) {
                    return '结束时间不能小于开始时间';
                }
            }
        });

        //时间控制器
        var date = new Date();
        var now_time = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + '';
        laydate.render({
            elem: '#startTime',
            min: now_time   // 最小不能小于今天，即今天之前的日期不能选择
        });
        laydate.render({
            elem: '#deadTime',
            min: now_time   // 最小不能小于今天，即今天之前的日期不能选择
        });



        //新增订单
        $("#addOrder").click(function (){
            tanIndex= layer.open({
                type:1,  //设置类型 默认为0 1 页面层 2 iframe层
                title:'新增订单信息',  //标题
                content:$("#mydiv"), //内容  type=0 的内容
                skin:'layui-layer-molv',//skin - 样式类名
                area:['80%', '80%'],  //area - 宽高
                offset: [0, 150],//offset - 坐标 默认：垂直水平居中
                btnAlign:'c',//按钮排列
                closeBtn:2,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin:true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success:function(index){
                    url="addOrder";
                    //清空表单数据
                    $("#dataform")[0].reset();
                }
            });
        });



        //新增form表单
        form.on("submit(dosubmit)",function(obj){
            //序列化表单数据
            var params=$("#dataform").serialize();
            $.post(url,params,function(data){
                //刷新数据表格
                mytable.reload();
                //关闭弹出层
                layer.close(tanIndex);
            });
        })


        table.on('tool(table-order-filter)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            //查看详情点击事件
            if (obj.event=='find'){
                //修改，打开修改窗口
                var index = layer.open({
                    title: '查看详情',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: false,
                    area: ['80%', '80%'],
                    content: 'find/'+data.orderId,
                });
            }
            //修改订单点击事件
            if (obj.event=='findById'){
                //修改，打开修改窗口
                var index = layer.open({
                    title: '修改订单',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: false,
                    area: ['60%', '80%'],
                    content: 'findById/'+data.orderId,
                });
            }
        })



    });
</script>
</body>
</html>

